<template>
  <div class="pie-box">
     <div v-if="btnData.length==0" class="board-title" style="margin-bottom: 10px">设备分类</div>
    <div v-if="btnData.length > 0">
      <el-button plain :type="i==0?'primary':i==1?'success':i==2?'info':'warning'"  v-for="(item, i) in btnData" :key="i">{{
        item
      }}</el-button>
    </div>

    <div
      ref="charts"
      :class="className"
      :style="{ height:height, width: width }"
    />
  </div>
</template>

<script>
import * as echarts from "echarts";
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "290px",
    },
  },
  data() {
    return {
      chart: null,
      btnData: [],
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart();
    // });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart(btnData, data) {
      this.btnData = btnData;
      this.chart = echarts.init(this.$refs.charts);
      var option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left:"7%",
          top: btnData.length > 0 ?"50px":'10px',
        },
        series: [
          {
            name: "设备数据",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "18",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };

      option && this.chart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.pie-box {
  background: #fff;
  padding: 10px;
}
</style>